<template>
	<view class="signIn">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="注册" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='注册'></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="account">
				<view class="text">确认账户前 6 位</view>
				<input v-model="userInfo_signIn.account" />
			</view>
			<view class="password">
				<view class="text">确认账户密码</view>
				<input v-model="userInfo_signIn.password" />
			</view>
			<view class="button-submit" @tap="Submit_signIn()">保存并提交</view>
		</view>
	</view>
</template>

<script>
	// 导入云对象
	const userInfo = uniCloud.importObject('userInfo', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo_signIn: {
					account: '',
					password: '',
				}
				// 标识变量
			}
		},
		methods: {
			Submit_signIn() {
				console.log('注册', this.userInfo_signIn)
				// 判断账户前6位
				if (!this.userInfo_signIn.account || this.userInfo_signIn.account.length != 6) {
					console.warn('未输入账户前6位');
					return;
				}
				// 判断密码
				if (!this.userInfo_signIn.password) {
					console.warn('未输入账户密码');
					return;
				}
				userInfo.signIn(this.userInfo_signIn).then(res => {
					console.log(res);
					let app = getApp();
					app.userInfo = res;
					uni.switchTab({
						url: "/pages/personalPage/personalPage"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.password,
	.account {
		position: fixed;
		top: 280rpx;
		width: 100vw;

		.text {
			text-align: center;
			font-size: $font-size-l-m;
		}

		input {
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 40rpx;
			background-color: white;
			height: 80rpx;
			width: 500rpx;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			text-align: center;
			font-size: $font-size-m-l;
		}
	}

	.password {
		top: 500rpx;
	}


	.button-submit {
		background-color: rgba(33, 92, 197, 0.8);
		height: 100rpx;
		width: 300rpx;
		border-radius: 20rpx;
		position: fixed;
		top: 800rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: $font-size-l-m;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>